<script lang="ts" setup>
// #region 引入包, 函数和组件

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const size = defineModel('size')
const page = defineModel('page')
const { total } = defineProps<{
  total: number
}>()

const emits = defineEmits<{
  getUserList: [query: { size: number; page: number }]
}>()
// #endregion

// #region // 变量

// #endregion

// #region // 函数
const handleSizeChange = (e: number) =>
  emits('getUserList', { size: e, page: page.value as number })
const handleCurrentChange = (e: number) =>
  emits('getUserList', { size: size.value as number, page: e })
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <div class="table_pagination">
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      :page-sizes="[5, 10, 15, 20]"
      :background="true"
      layout="prev, pager, next, sizes, jumper, total"
      :total
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style lang="sass" scoped>
.table_pagination
  padding: 20px
  .el-pagination
    justify-content: end
</style>
